import Vue from "vue";
import { Divider } from "vant";

Vue.use(Divider);

export default {
  name: "shop",

  data() {
    return {
      searchVal: ""
    };
  },

  watch: {
    // 如果路由有变化，会再次执行该方法
    $route(val) {
      console.log(val);
    }
  },

  methods: {
    renderBlocks() {
      return (
        <section class="column-block-wrap">
          <div class="block-wrap" style={{ width: "100%" }}>
            <van-button plain size="small" type="info">
              城市运营中心10
            </van-button>
            <van-button plain size="small" type="info">
              区县服务中心100
            </van-button>
            <van-button plain size="small" type="info">
              体验店1000
            </van-button>
          </div>
          <van-divider style={{ width: "100%" }} />
          <div class="block-wrap" style={{ width: "100%" }}>
            <div class="label-text" style={{ width: "100px" }}>
              数量: <span class="money">2100</span>
            </div>
            <div class="label-text" style={{ width: "100px" }}>
              总分润: <span class="money">2100</span>
            </div>
          </div>
        </section>
      );
    },

    renderSearch() {
      return (
        <form action="/">
          <van-search
            class="search"
            placeholder="请输入搜索关键词"
            value={this.searchVal}
            on-input={val => {
              this.searchVal = val;
            }}
            show-action
            on-search="onSearch"
          >
            <div slot="action" on-click="onSearch">
              搜索
            </div>
          </van-search>
        </form>
      );
    },

    renderLists() {
      return (
        <div class="pannel-wrap" style={{ "margin-top": "5px" }}>
          <van-cell
            title="体验店1"
            value="2000"
            value-class="money"
            label="区域A"
          />
          <van-cell
            title="体验店1"
            value="2000"
            value-class="money"
            label="区域A"
          />
        </div>
      );
    }
  },

  render() {
    return (
      <div class="main-wrap">
        {this.renderSearch()}
        {this.renderBlocks()}
        {this.renderLists()}
      </div>
    );
  }
};
